<template>
  <RouterView />
</template>

<script setup>
import { ref, onMounted } from 'vue'
const setVarStyle = (key, value, dom = document.documentElement) => {
  dom.style.setProperty(key, value)
}
onMounted(() => {
  // --el-color-white: #ffffff;
  // --el-color-black: #000000;
  // --el-color-primary: #409eff;
  // --el-color-primary-light-3: #79bbff;
  // --el-color-primary-light-5: #a0cfff;
  // --el-color-primary-light-7: #c6e2ff;
  // --el-color-primary-light-8: #d9ecff;
  // --el-color-primary-light-9: #ecf5ff;
  // --el-color-primary-dark-2: #337ecc;
  // --el-color-success: #67c23a;
  // --el-color-success-light-3: #95d475;
  // --el-color-success-light-5: #b3e19d;
  // --el-color-success-light-7: #d1edc4;
  // --el-color-success-light-8: #e1f3d8;
  // --el-color-success-light-9: #f0f9eb;
  // --el-color-success-dark-2: #529b2e;
  // --el-color-warning: #e6a23c;
  // --el-color-warning-light-3: #eebe77;
  // --el-color-warning-light-5: #f3d19e;
  // --el-color-warning-light-7: #f8e3c5;
  // --el-color-warning-light-8: #faecd8;
  // --el-color-warning-light-9: #fdf6ec;
  // --el-color-warning-dark-2: #b88230;
  // --el-color-danger: #f56c6c;
  // --el-color-danger-light-3: #f89898;
  // --el-color-danger-light-5: #fab6b6;
  // --el-color-danger-light-7: #fcd3d3;
  // --el-color-danger-light-8: #fde2e2;
  // --el-color-danger-light-9: #fef0f0;
  // --el-color-danger-dark-2: #c45656;
  // --el-color-error: #f56c6c;
  // --el-color-error-light-3: #f89898;
  // --el-color-error-light-5: #fab6b6;
  // --el-color-error-light-7: #fcd3d3;
  // --el-color-error-light-8: #fde2e2;
  // --el-color-error-light-9: #fef0f0;
  // --el-color-error-dark-2: #c45656;
  // --el-color-info: #909399;
  // --el-color-info-light-3: #b1b3b8;
  // --el-color-info-light-5: #c8c9cc;
  // --el-color-info-light-7: #dedfe0;
  // --el-color-info-light-8: #e9e9eb;
  // --el-color-info-light-9: #f4f4f5;
  // --el-color-info-dark-2: #73767a;
  // --el-bg-color: #ffffff;
  // --el-bg-color-page: #f2f3f5;
  // --el-bg-color-overlay: #ffffff;
  // --el-text-color-primary: #303133;
  // --el-text-color-regular: #606266;
  // --el-text-color-secondary: #909399;
  // --el-text-color-placeholder: #a8abb2;
  // --el-text-color-disabled: #c0c4cc;
  // --el-border-color: #dcdfe6;
  // --el-border-color-light: #e4e7ed;
  // --el-border-color-lighter: #ebeef5;
  // --el-border-color-extra-light: #f2f6fc;
  // --el-border-color-dark: #d4d7de;
  // --el-border-color-darker: #cdd0d6;
  // --el-fill-color: #f0f2f5;
  // --el-fill-color-light: #f5f7fa;
  // --el-fill-color-lighter: #fafafa;
  // --el-fill-color-extra-light: #fafcff;
  // --el-fill-color-dark: #ebedf0;
  // --el-fill-color-darker: #e6e8eb;
  // --el-fill-color-blank: #ffffff;
  // --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),0px 8px 20px rgba(0, 0, 0, 0.08);
  // --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
  // --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
  // --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),0px 12px 32px rgba(0, 0, 0, 0.12),0px 8px 16px -8px rgba(0, 0, 0, 0.16);
  // --el-disabled-bg-color: var(--el-fill-color-light);
  // --el-disabled-text-color: var(--el-text-color-placeholder);
  // --el-disabled-border-color: var(--el-border-color-light);
  // --el-overlay-color: rgba(0, 0, 0, 0.8);
  // --el-overlay-color-light: rgba(0, 0, 0, 0.7);
  // --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
  // --el-mask-color: rgba(255, 255, 255, 0.9);
  // --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
  // --el-border-width: 1px;
  // --el-border-style: solid;
  // --el-border-color-hover: var(--el-text-color-disabled);
  // --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
  // --el-svg-monochrome-grey: var(--el-border-color);

  
  setVarStyle('--el-button-hover-text-color', '#FCF8F8')
  setVarStyle('--el-text-color-regular', '#FCF8F8')
  setVarStyle('--el-text-color-secondary', '#FCF8F8')
  setVarStyle('--el-border-color-light', '#38666cf0')
  setVarStyle('--el-border-color-lighter', '#0E2326')
  setVarStyle('--el-border-color-hover', '#38666cf0')

  setVarStyle('--el-fill-color-light', '#0a6c7e59')

  setVarStyle('--el-bg-color', '#0E2326')
  setVarStyle('--el-table-row-hover-bg-color', '#FCF8F8')
  setVarStyle('--el-fill-color-blank', '#fff0')
  setVarStyle('--el-bg-color-overlay', '#0E2326')
  setVarStyle('--el-border-color', 'rgba(0, 255, 251, 0.2588235294)')
  setVarStyle('--el-button-text-color', '#FCF8F8')
  setVarStyle('--el-color-primary', '#18676B')

  setVarStyle('--el-color-primary-dark-2', '#18676B')
  setVarStyle('--el-color-primary-light-9', '#18676B')
  setVarStyle('--el-color-primary-light-8', '#18676B')
  setVarStyle('--el-color-primary-light-7', '#18676B')
  setVarStyle('--el-color-primary-light-6', '#18676B')
  setVarStyle('--el-color-primary-light-5', '#18676B')
  setVarStyle('--el-color-primary-light-4', '#18676B')
  setVarStyle('--el-color-primary-light-3', '#245659')
  setVarStyle('--el-color-primary-light-2', '#18676B')
  setVarStyle('--el-color-primary-light-1', '#18676B')
})
</script>

<style lang="scss" scoped>
:deep(.el-table .warning-row) {
  --el-table-tr-bg-color: '#0E2326';
}
:deep(.el-table .el-table__cell) {
  padding: 18px 0;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  background: #fcf8f800;
}
:deep(.el-button) {
  border: 1px solid #18676B;
}
:deep(.el-button:focus, .el-button:hover) {
  color: #FCF8F8;
}
:deep(.el-tree-node__content) {
  height: 40px;
  border-radius: 4px;
  margin: 5px 0;
}

:deep(.el-tree) {
 font-size: 14px; 
}
</style>
<style>

.el-dropdown-menu__item:not(.is-disabled):focus {
  color: #fff !important;
}
</style>
